<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>发表评论 - 五四宪法历史资料陈列馆</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/common.js"></script>
</head>
<body>
<div class="main">
    <div class="top">
        <a class="back" href="javascript:history.back(-1)"><img src="static/image/left.png" alt="">返回</a>
        发表评论
    </div>

        <div class="comment container">
            <form action="comment" method="post" id="formid">
            <input type="hidden" value="{$id}" name="id">
                <input type="hidden" value="2" name="status">
                <input type="hidden" name="evaluate" value="" class="evaluate">
                <div class="star">
                    <span>满意度：</span>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <span id="message"></span>
                </div>
                <div class="comment_button">
                    <a href="javascript:;">馆内整洁</a>
                    <a href="javascript:;">内容丰富</a>
                    <a href="javascript:;">讲解充分</a>
                    <a href="javascript:;">态度好服务棒</a>
                    <input type="hidden" name="goodComment" class="goodComment">
                </div>
                <textarea name="evcontent" id="" cols="30" rows="10" placeholder="请输入对此次参观五四宪法历史资料陈列馆的评价，最多140字。" maxlength="140"></textarea>
                <a href="javascript:;" class="submit" onclick="submit()">发布</a>
            </form>
        </div>

</div>
<script>
    $(function(){
        $(".star i").on("click", function () {
            var num = 0;
            $('textarea').css('display','block')
            $('.star').addClass('shin');
            if(!($(this).hasClass('current'))){
                $(this).addClass('current').prevAll().addClass('current').end().nextAll().removeClass('current');
            }else{
                $(this).addClass("current").nextAll().removeClass("current")
            }
            $('.shin i').each(function(){
                if($(this).hasClass('current')){
                    num+=1;
                }
            })
            if(num >=4){
                 $('.comment_button').show();
            }else{
                $('.comment_button').hide();
            }
        })
    })
    function submit(){
        var goodComment = "";
        $('.comment_button .on').each(function(){
            goodComment += $(this).html()+",";
        })
        if (goodComment.length > 0) {
            goodComment = goodComment.substr(0, goodComment.length - 1);
        }
        $('.goodComment').val(goodComment);
        if(!($('.star').hasClass('shin'))){
            alert('请点亮星星');
            return false;
        }
        $(".evaluate").val($(".current").length-1);
         $("#formid").submit();
    }
    $('.comment_button>a').click(function(){
        if($(this).hasClass('on')){
            $(this).removeClass('on')
        }else{
            $(this).addClass('on')
        }
    })
</script>
</body>
</html>